<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .countdown {
            margin: 100px auto;
            width: 421px;
            height: 535px;
            background-color: #9c2a2b;
        }

        /* 字体颜色 */
        .color {
            color: #fff;
            text-align: center;
        }

        /* today */
        .countdown .today {
            padding-top: 50px;
            font-size: 26px;
        }

        /* 倒计时模块 */
        .countdown h2 {
            font-size: 55px;
            margin-top: 65px;
        }

        .countdown ul {
            margin-top: 60px;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        /* .countdown ul li {
        
        } */


        .countdown ul .character {
            width: 32px;
            height: 55px;
            line-height: 55px;
            font-size: 24px;
            font-weight: 900;
        }

        .countdown ul li[class^="time"] {
            width: 55px;
            height: 55px;
            background-color: #35332f;
            font-size: 32px;
            line-height: 55px;
        }

        /* 下课时间 */
        .countdown .classafter {
            font-size: 36px;
            margin-top: 100px;
        }
    </style>

</head>

<body>
    <!-- 倒计时大盒子 -->
    <div class="countdown">


        <!-- 今天日期模块 -->
        <div class="today color">今天是什么日期</div>


        <!-- 下班倒计时模块 -->
        <h2 class="color">下课倒计时</h2>
        <div class="color">
            <ul>
                <li class="time_h">00</li>
                <li class="character">:</li>
                <li class="time_m">00</li>
                <li class="character">:</li>
                <li class="time_s">00</li>
            </ul>
        </div>

        <!-- 下课时间模块 -->
        <div class="classafter color">18:30:00下课</div>
    </div>



    <!-- js模块 -->
    <script>
        // 获取今日日期
        const date = new Date()
        const today = document.querySelector('.today')
        today.innerHTML = `今天是${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日`

        // 倒计时模块
        function fn() {
            let h = document.querySelector('.countdown .time_h')
            let m = document.querySelector('.countdown .time_m')
            let s = document.querySelector('.countdown .time_s')
            let times = +new Date('2023-5-29 18:30:00')
            hh = parseInt((times - +new Date()) / 1000 / 60 / 60)
            mm = parseInt((times - +new Date()) / 1000 / 60 % 60)
            ss = parseInt((times - +new Date()) / 1000 % 60)
            hh = hh < 10 ? '0' + hh : hh
            mm = mm < 10 ? '0' + mm : mm
            ss = ss < 10 ? '0' + ss : ss
            h.innerHTML = hh
            m.innerHTML = mm
            s.innerHTML = ss

            // 换背景颜色
            let str = '#'
            let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
            for (let i = 0; i < 6; i++) {
                let random = Math.floor(Math.random() * arr.length)
                str += arr[random]

            }
            document.querySelector('.countdown').style.backgroundColor = str
            // 递归调用
            setTimeout(fn, 1000)
        }
        fn()
    </script>
</body>

</html>